<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>找回密码</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">

    <link rel="stylesheet" href="../css/findpassword.css" media="all">
</head>
<body>
<div id="container" >
    <div class="top">
        <div class="icon_box">
            <div>视频教学网</div>
            <div>www.videostudy.com</div>
        </div>

    </div>
<div style="">

    <img width="100%" height=150px src="../img/top.png"/>
</div>
<div id="main-div" style="height: 500px;background-color: white">
<div style="height: 50px;margin-left:100px;font-size: 18px">

    <a onclick="login()"  style="color: #1E9FFF;cursor: pointer">登录</a>
    <a>></a>
  <a >找回密码</a>

</div>
<div style="font-size: 25px;margin-left: 485px">
    <a style="color: #00FFFF">①输入账号</a>
    <a>→</a>
    <a style="color: #f9a7a7">②重置密码</a>
    <a>→</a>
    <a style="color: #aedbfb">③重置成功</a>
</div>

    <div>
        <form class="layui-form" style="margin-left: 505px;margin-top: 50px;" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">确认账号:</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" lay-verify="required" id="account" autocomplete="off"  lay-reqtext="用户名不能为空"  placeholder="请输入账号" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">设置密码:</label>
                <div class="layui-input-inline">
                    <input type="password" id="password" name="password" lay-verify="pass"  placeholder="请填写6到12位密码" autocomplete="off" class="layui-input">
                </div>

            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码:</label>
                <div class="layui-input-inline">
                    <input type="password" id="pwdagain"  lay-verify="pass"  placeholder="再次输入密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux"  style="margin-left: 45px">
                    <text hidden id="tip"   style="color: #c40000">两次密码不一致，请重新输入</text>
                </div>
            </div>

            <button type="button" onclick="displayTip()" class="layui-btn  layui-btn-normal "lay-filter="update" style="width: 190px;margin-left: 110px"  lay-submit>确认修改</button>
        </form>

    </div>
</div>

</div>

</body>
<script type="text/javascript" src="../layui/layui.js"></script>
<script>
    layui.use(['form','jquery','layer'], function(){
        var form = layui.form
        var $ = layui.jquery, layer = layui.layer;

        //自定义验证规则
        form.verify({
            pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]

        });

    });

    function displayTip(){

        if (document.getElementById('password').value==document.getElementById('pwdagain').value){
            document.getElementById('tip').hidden=true;
            layui.use(['form','jquery','layer'], function() {
                var form = layui.form
                var $ = layui.jquery, layer = layui.layer;
                form.on('submit(update)', function (data) {

                    $.ajax({
                        url: '../user/findpwd',
                        type: 'POST',
                        dataType: 'JSON',
                        contentType:"application/json",
                        data: JSON.stringify(data.field),
                        success: function (obj) {
                            layer.msg('修改成功');
                            window.location.href = "userLogin"
                        }
                    })
                    return false;


                });
            })

        }else {
            document.getElementById('tip').hidden=false
        }

    }



    function login(){
        window.location.href="userLogin"
    }
</script>
</html>
